<template>
  <div class="luckdraw-auth">
    <div class="luckdraw-auth-container">
      <img class="logo" :src="icons.logo"/>
      <div class="title">
        <p>天天派奖</p>
        <p>欢迎你</p>
      </div>
      <div class="info">
        <p>请微信授权登录后放心使用天天派奖</p>
        <p>你的信息和数据将受到保护</p>
      </div>
      <div class="btn">
        <button v-if="canIUse" open-type="getUserInfo" @getuserinfo="onGetUserInfo">微信授权登录</button>
        <p v-else>请先升级微信版本</p>
      </div>
      <div class="footer">
        <div class="footer-inner">
          <p>版本：v1.1.0</p>
          <button open-type="contact">联系客服</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MButton from 'comp/m-button'

export default {
  components: {
    MButton
  },
  data () {
    return {
      icons: {
        logo: `${require('static/images/logo.png')}`
      },
      canIUse: wx.canIUse('button.open-type.getUserInfo')
    }
  },
  mounted () {
  },
  methods: {
    onGetUserInfo (e) {
      if (e.mp.detail.userInfo) {
        // 授权成功
        wx.navigateBack()
      } else {
        // 授权失败
        wx.showToast({
          title: '为了更好的体验，请先同意授权',
          icon: 'none',
          duration: 4000
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-auth {
  &-container {
    padding: 80rpx 0;
    text-align: center;
  }
  .logo {
    display: block;
    width: 140rpx;
    height: 140rpx;
    margin: 0 auto;
  }
  .title {
    color: #333;
    font-size: 36rpx;
    padding-top: 50rpx;
    line-height: 1.5;
  }
  .info {
    color: #777;
    font-size: 28rpx;
    padding: 50rpx 100rpx 0;
    line-height: 1.5;
  }
  .btn {
    padding: 80rpx 100rpx;
    display: block;
    button {
      font-size: 32rpx;
      border-width: 2rpx;
      border-style: solid;
      border-radius: 0;
      background: #d15241;
      color: #fff;
      border-color: #d15241;
      &:active {
        background: #b04639;
        border-color: #b04639;
      }
      &[disabled] {
        background: #DCDBDB;
        color: #fff;
        border-color: #DCDBDB;
        &:active {
          background: #DCDBDB;
        }
      }
      &:after {
        display: none;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 50rpx;
    font-size: 24rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    p {
      color: #777;
    }
    a {
      color: #488ff0;
      padding-top: 20rpx;
    }
    button {
      font-size: 24rpx;
      border: none;
      color: #488ff0;
      background-color: transparent;
      &:after {
        display: none;
      }
    }
  }
}
</style>
